﻿<!DOCTYPE html>
<html>
<head> 
	<title>Easing and Elastic with Processing.js</title> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
	<script type="text/javascript" src="js/processing.js"></script> 
</head>
<body>
<canvas id="display"></canvas> 

<script  data-processing-target="display" type="application/processing"> 
int totalBlobs = 10;
Blob[] blobs = new Blob[totalBlobs];
int width, height;

color strokeColor = color(255, 0, 0);
color fillColor = color(255, 255, 255);

float targetX, targetY;

void setup() {
    width = jQuery(document).width() - 30;
    height = jQuery(document).height() - 30;
    targetX = width / 2;
    targetY = height / 2;
    size(width, height);
    noStroke();
    smooth();
    background(0);
    for (int i = 0; i < totalBlobs; i++) {
        Blob blob = new Blob();
        blob.x = random(width);
        blob.y = random(height);
        blob.easingX = .02 + random(.10);
        blob.easingY = .02 + random(.10);
        blob.strokeSize = 100 + random(160.0);
        blob.fillSize = blob.strokeSize - 20.0;
        blobs[i] = blob;
    }
};

void draw() {
    background(0);
    fill(strokeColor);
    for (int i = 0; i < totalBlobs; i++) {
        blobs[i].springToward(targetX, targetY);
        blobs[i].renderStroke();
    }
    fill(fillColor);
    for (int i = 0; i < totalBlobs; i++) {
        blobs[i].renderFill();
    }
    
}

void pointerMove(PointerEvent e){
    targetX = e.offsetX;
    targetY = e.offsetY;
}

class Blob{
  float x = 0.0;
  float y = 0.0;
  float vx = 0.0;
  float vy = 0.0;
  float easingX = 0.0;
  float easingY = 0.0;
  float strokeSize = 180.0;
  float fillSize = 160.0;
  
  void renderStroke() {
      ellipse(this.x, this.y, this.strokeSize, this.strokeSize);
  }
  
  void renderFill() {
      ellipse(this.x, this.y, this.fillSize, this.fillSize);
  }
  
  void springToward(float _x, float _y) {
      this.vx += (_x - this.x) * this.easingX;
      this.vy += (_y - this.y) * this.easingY;
      this.vx *= .92;
      this.vy *= .90;
      this.x += this.vx;
      this.y += this.vy;
  }
}
	</script> 
    </body>
</html>